<template>
    <div class="container">
        <div class="wrapper">
            <div class="imgDiv">
                <img src="../assets/register.jpg" alt="" style="max-width: 100%;height: 100%;">
            </div>
            <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                <el-form :model="user" style="width:80%;" :rules="rules" ref="registerRef">
                    <div style="font-size: 20px;font-weight: bold;margin-bottom: 20px;text-align: center;">欢迎注册开源数据分析系统</div>
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" size="medium" v-model="user.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" size="medium" v-model="user.password" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="confirmPassword">
                        <el-input prefix-icon="el-icon-lock" placeholder="请确认密码" size="medium" v-model="user.confirmPassword" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="email">
                        <el-input prefix-icon="el-icon-youxiang" placeholder="请输入邮箱" size="medium" v-model="user.email" clearable ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="register" type="primary" style="width:100%;">注册</el-button>
                    </el-form-item>
                    <div style="display:flex ; justify-content: space-between; ">
                        <div>
                            已经有一个账号？请<span style="color: blue; cursor:pointer;" @click="$router.push('/login')">登录</span>
                        </div>
                    
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name:'Register',
        data(){
            const validateConfirm = (rule,value,callback)=>{
                if(value === ''){
                    callback(new Error('请再次输入密码'))
                }else if(value !=this.user.password){
                    callback(new Error('两次输入密码不一致'))
                }
                callback()
            }
            return{
                user:{
                    username:'',
                    password:'',
                    confirmPassword:'',
                    email:''
                },
                realCode:'',
                rules:{
                    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                    password:[{required:true,message:'请输入密码',trigger:'blur'}],
                    confirmPassword:[{ validator:validateConfirm,trigger:'blur'}],
                    email:[{required:true,message:'请输入邮箱',trigger:'blur'}],
                    
                },
            }
        },
        methods:{
            register(){
                this.$refs['registerRef'].validate((valid)=>{
                    if(valid){
                        this.$request.post('/api/auth/register',this.user).then(res=>{
                            if(res.status === 201){
                                this.$router.push('/login')
                                this.$message.success('注册成功')
                            }else{
                                this.$message.error(res.msg)
                            }
                        })

                    }
                })
            }
        }
    }
</script>

<style scoped>
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: cadetblue;
}
.wrapper{
    display: flex;
    background-color: white;
    width:80%;
    height:60%;
    border-radius: 0.42rem;
    overflow: hidden;
}
.imgDiv{
    flex:1;
    @media screen and (max-width:820px) {
        display: none;
    }


}
</style>